<template>
  <div>
    <div id="good-detail">
      <div class="container">
        <swiper class="swiper" autoplay="true" interval="5000" duration="1000" circular="true">
          <block>
            <swiper-item class="am-slider">
              <i class="iconfont">&#xe67f;</i>
              <img :src="selectedGood.thumb" style="width: 100%; height: 100%;"/>
              <span v-show="imgecounts >2">1/{{imgecounts}}</span>
            </swiper-item>
          </block>
        </swiper>
        <section>
          <aside>
            <p>{{selectedGood.title}}</p>
            <p class="mt5"  v-if="!promotionId"><span>￥</span>{{selectedGoods.attribute_price}}<span class="pl5">{{selectedGoods.attribute_name}}</span></p>
            <p class="mt5" v-else><span>￥</span>{{selectedGood.promotion_price}}<span class="pl5">{{selectedGood.attribute_name}}</span></p>
          </aside>
          <aside v-if="!promotionId" class="stock">
            <p>库存: {{selectedGoods.stock}}</p>
            <p class="mt10">销量: {{selectedGoods.sales}}</p>
          </aside>
          <aside v-else class="stock">
            <p>库存: {{selectedGood.sorts}}</p>
            <p class="mt10">销量: {{selectedGood.sales}}</p>
          </aside>
        </section>
        <!-- <div class="chuxiao">
           <p>促销</p>
           <p>满50元减10元 </p>
         </div> -->
        <main>
          <header>
            <p>已1件商品</p>
            <i class="iconfont" @click="showMore">{{text}}</i>
          </header>
          <section v-show="show">
            <h3 style="font-weight: 600">选择规格</h3>
            <div class="button-groups" v-if="!promotionId">
              <button @click="istrue=index" @click.capture="getGuige(index)" v-for="(selecedEvery,index) in selectedGood.attribute" :key="selecedEvery.index" :class= "{select: istrue === index}">
                <p><span>￥</span>{{selecedEvery.attribute_price}}</p>
                <aside>{{selecedEvery.attribute_name}}</aside>
              </button>
            </div>
            <div class="button-groups" v-else>
              <button class="select">
                <p><span>￥</span>{{selectedGood.promotion_price}}</p>
                <aside>{{selectedGood.attribute_name}}</aside>
              </button>
            </div>
            <div class="add-button">
              <add-decrsde :good="selectedGood" v-if="selectedGood.id"  @addMount="getMount"></add-decrsde>
            </div>
          </section>
        </main>
        <div class="goods-script">
          <h4 style="font-weight: 600">商品详情</h4>
          <p v-html="selectedGood.content"></p>
        </div>
      </div>
      <footer>
        <div>
          <aside @click="commonData">
            <i class="iconfont" :style="{color: commonDataColor}">&#xe66c;</i>
            <p :style="{color: commonDataColor}">加常用</p>
          </aside>
          <!--<aside @click="commonList">
           <i class="iconfont" :style="{color: active}">&#xe66c;</i>
            <p :style="{color: active}">清单</p>
          </aside>-->
          <aside style="border: none">
            <button v-show="goodsMounts > 0">{{goodsMounts}}</button>
            <i class="iconfont">&#xe674;</i>
            <p>购物车</p>
          </aside>
        </div>
        <button @click="addShopping" type="success">加入购物车</button>
      </footer>
    </div>
  </div>
</template>

<script type="ECMAScript 6">
  import addDecrsde from '@/components/add-decrsde';
    export default {
        name: 'good-detail',
      components: {
          addDecrsde
      },
      data () {
        return {
          loadingData: false,
          error: null,
          post: null,
          active: '',
          commonDataColor: '',
          showData: false,
          imgecounts: 2,
          id: '',
         /* promotionId: this.$route.query.promotionId,*/
          loading: false,
          istrue: 0,
          text: '',
          selectedGood: [],
          selectedGoods: {},
          value3: 0,
          counts: 0,
          buttonSize: 'small',
          show: true,
          goodsMounts: 0,
          status: 0
        };
      },
      onLoad (option) {
        this.id = option.id;
        console.log(this.id);
        this.fetchData();
      },
      methods: {
        getGuige (index) {
          this.selectedGoods = this.selectedGood.attribute[index];
          this.searchCommonList(this.selectedGood.id, this.selectedGoods.id);
        },
        searchCommonList (goodsId, attributeId) {
          let data = {'goods_id': goodsId, 'attribute_id': attributeId, 'is_collect': 1, 'user_id': this.$store.state.userid};
          this.$httpWX.post({
            url: 'api/v1.cart/mallAttribute',
            data: data
          }).then(response => {
            if (response.data.status === 1) {
              this.commonDataColor = '#989594';
            } else {
              this.commonDataColor = '#41B962';
            }
          }, response => {
          });
        },
        getMount (stocks) {
          this.$set(this.selectedGood, 'promotion_num', stocks.counts);
        },
        showMore () {
            this.show = !this.show;
            this.text = this.show ? '' : '';
        },
        addShopping (index) {
          if (this.judgeLogin()) {
            let data = {
              'goods_id': this.selectedGood.id,
              'attribute_id': this.selectedGood.attribute_id,
              'promotion_id': this.selectedGood.promotion_id,
              'num': this.selectedGood.promotion_num,
              'user_id': this.$store.state.userid
            };
            if (this.selectedGoods.id) {
              this.$set(data, 'attribute_id', this.selectedGoods.id);
            }
            if (index === 1) {
              this.$set(data, 'is_collect', index);
            }
            this.$http.post('api/v1.cart/add', data).then(response => {
              let datas = response.data;
              if (datas.status === 1 && index === 1) {
                this.$toast(datas.success.success);
                this.goodsMounts = datas.success.count;
                this.commonDataColor = '#989594';
                return;
              }
              if (datas.status === 1) {
                this.$toast(datas.success.success);
                this.goodsMounts = datas.success.count;
              } else {
                this.$toast(datas.err);
              }
            }, response => {
            });
          }
        },
        commonData () {
          this.addShopping(1);
        },
        judgeLogin () {
         /* if (!sessionStorage.getItem('username')) {
            this.$messagebox.confirm('', {
              message: '请登陆后在操作',
              confirmButtonText: '去登录',
              cancelButtonText: '取消'
            }).then(action => {
              if (action === 'confirm') {
                this.$router.push('/login');
              }
            }, error => {
              if (error === 'cancel') {
              }
            });
            return false;
          }
            return true;*/
        },
        setCounts () {
          this.$set(this.selectedGood, 'sorts', this.selectedGood.sort);
          this.$set(this.selectedGood, 'thumb', this.$store.state.http + this.selectedGood.thumb);
          this.showData = true;
        },
        inintPromotionData () {
          this.loadingData = true;
          this.post = this.error = null;
          this.$http('api/v1.promotion/view?id=' + this.id + '&promotion_id=' + this.promotionId + '&user_id=' + this.$store.state.userid).then(response => {
              if (response.data.status === 1) {
                  let datas = response.data.success;
                  this.goodsMounts = datas.cart_num;
                  this.selectedGood = datas.data;
                  this.$set(this.selectedGood, 'counts', this.selectedGood.promotion_num);
                  this.setCounts();
                  this.$set(this.selectedGood, 'sorts', this.selectedGood.promotion_stock);
                  this.searchCommonList(this.selectedGood.id, this.selectedGood.attribute_id);
                  this.post = response;
                  this.loadingData = false;
              }
          }, error => {
            this.error = error;
          });
        },
        fetchData () {
          this.loadingData = true;
          this.post = this.error = null;
          this.loading = true;
          // 拿到查询字段，
          if (this.promotionId) {
            this.inintPromotionData();
          } else if (this.promotionId && this.judgeLogin()) {
            this.inintPromotionData();
          } else {
            this.$httpWX.get({
              url: 'api/v1.index/details?id=' + this.id + '&user_id=' + this.$store.state.userid
            }).then(response => {
              let datas = response.data;
              this.selectedGood = datas.data;
              this.selectedGoods = this.selectedGood.attribute[0];
              this.$set(this.selectedGood, 'counts', 1);
              this.$set(this.selectedGood, 'promotion_num', 1);
              this.searchCommonList(this.selectedGood.id, this.selectedGoods.id);
              this.goodsMounts = datas.cart_num;
              this.setCounts();
              this.post = response;
              this.loadingData = false;
            }, error => {
              this.error = error;
            });
          }
          this.loading = false;
          }
        }
      };
</script>

<style lang="stylus" scoped>
#good-detail
  .container
      padding-bottom 55px;
      .mint-swipe-item
        position relative;
        img
          width 100%; height 100%;
        i
          position absolute; top 11px; right 13px; display inline-block; width 35px; height 35px;line-height 35px; border-radius 50%; text-align center; background rgba(0,0,0,0.6);color #fff;
        span
          position absolute; right 13px; bottom 13px; display inline-block; min-width 40px; height 25px; font-size 12px; color white; text-align center; line-height 27px; border-radius 13px;background rgba(0,0,0,0.6);
      &>section
        display flex; align-items center; margin-top: -2%;  padding 0 12px 0 13px;min-height 85px;  background white;
        &>aside
          &>p
            font-size 15px; font-weight 500
          &>p+p
             font-size: 20px;  color: #F54727;
          &>p+p>span
            font-size: 13px;
          &>p+p>span+span
              color: #525252;
          &>p+p>span+span+span
              margin-left: 10px;  font-size: 13px;  color: #525252;
          &>p+p>span+span+span>span
              color: #F54727;
        &> .stock
          flex 1;
          &>p
            font-size: 12px; text-align: right; color: #AEAEAE;
          &>p+p
            margin-top: 10px;
      &>.chuxiao
        display flex; margin-top 4px; padding 0 13px; background white; line-height 50px;
        &>p
          font-size 14px;
        &>p+p
          flex 1; font-size 13px; color #F54727; text-align right;
      main
        margin-top 4px; padding 0 10px 0 14px; background #fff;
        &>header
          display flex;  align-items center; height 40px; border-bottom 1px solid #f3f2f2
          &>p
            flex 1 ; font-size 14px; color #AEAEAE
          &>i
            color: #CECECE
        &>section
          h3
            padding 16px 0 14px 0; font-size 16px; font-weight 500
          .button-groups
            display flex; align-items center; flex-flow row wrap; padding-bottom 17px; border-bottom 1px solid #f3f2f2
            &>button
              display inline-block; padding-left 24px; padding-right 10px; margin 4px; min-width 150px; min-height 50px;  border 1px dotted #D5D5D5; border-radius 2px; background transparent;
              &>p
                font-size 16px; color #F54727; font-weight 500; text-align left;
                &>span
                  font-size 12px
              &>aside
                  font-size 13px; color #747474; text-align left
            &>button.select
              background #41B962;border 1px solid #41B962;
              &>p ,&>aside
                color white
          .add-button
            height 50px; display flex; align-items center; position relative
      .goods-script
        margin-top 4px; padding 17px 13px; background #fff
        &>h4
          font-size 15px; font-weight 500
        p
          margin-top 10px;font-size 12px; color #666
  footer
    position fixed; display flex; bottom 0; left 0 ; width 100%;  height 50px; background #fff
    &>div
       flex 1;display flex; align-items center
       &>aside
         position relative; flex 1;  border-right 1px solid #f3f2f2;
         &>i
          display block; line-height 20px; text-align center; font-size 26px; color #41B962
         &>p
          margin-top 2px; font-size 12px; line-height 14px; color #747474;text-align center
         &>button
          position absolute; right 37px; display inline-block; top: -5px; min-width 18px; min-height 18px;text-align center; color #fff; font-size 10px; background #F54727; border none; border-radius 50%
    &>button
      flex 0 0 120px; width 120px;  height 50px; border-radius 0; font-size 17px; font-weight 500; background #41B962; color #fff;
</style>
